<template>
  <div class="page-index p-20">
    <el-alert type="success" effect="dark" :closable="false"
      ><VolumeNotice /> 您正在浏览的是ElementPlus版本的模板，该模板处于放养状态，建议优先考虑<a
        class="link"
        href="http://comicui.cn/admin"
        >ComicPlus版本<Link /> </a
      >的模板，功能更全面，也是作者优先维护的版本。</el-alert
    >
    <div class="container">
      <div class="row mt-20">
        <div class="tile-card flex-1">
          <profile />
        </div>
      </div>
      <div class="row mt-20">
        <div class="col flex-1">
          <div class="tile-card"><task /></div>
          <div class="tile-card mt-20"><flow /></div>
        </div>
        <div class="col right">
          <div class="tile-card"><quick /></div>
          <div class="tile-card mt-20"><ranks /></div>
          <div class="tile-card mt-20"><diamond /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { VolumeNotice, Link } from '@icon-park/vue-next';
import profile from './components/profile.vue';
import ranks from './components/ranks.vue';
import flow from './components/flow.vue';
import task from './components/task.vue';
import quick from './components/quick.vue';
import diamond from './components/diamond.vue';
</script>

<style scoped lang="scss">
.container {
  .row {
    display: flex;
    gap: 20px;
  }
  .col {
    overflow: hidden;
  }

  .right {
    width: 30%;
  }
}
</style>
